@mItemDelay: 0.1s;
@mItemDur: 0.6s;
@mItemCount: 3;
@bgDur: 0.3s;
@bgDelay: @mItemCount * @mItemDelay + @mItemDur - @bgDur;

.menu {
  position: fixed;
  z-index: 99;
  top: 25px;
  right: 25px;
  &.show {
    .item {
      &:before {
        left: 130%;
      }
      &:after {
        right: 130%;
      }
      .txt {
        &.txt1 {
          transform: translateY(110%);
        }
        &.txt2 {
          transform: translateY(0%);
        }
      }
    }
  }
  .item {
    display: inline-block;
    line-height: 1;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    &:before,
    &:after {
      content: '';
      background: #000000;
      width: 120%;
      height: 50%;
      position: absolute;
      z-index: 1;
      transition: all 1s;
    }
    &:before {
      left: -130%;
      top: 0;
    }
    &:after {
      right: -130%;
      bottom: 0;
    }
    &:hover {
      .txt {
        span {
          transform: translateY(-100%);
        }
      }
    }
    .txt {
      display: inline-block;
      font-weight: bold;
      position: relative;
      overflow: hidden;
      transition: 0.1s ease-in-out;
      transition-delay: 0.25s;
      &.txt1 {
        position: absolute;
        top: 0;
        right: 0;
      }
      &.txt2 {
        transform: translateY(110%);
      }
      span {
        display: inline-block;
        position: relative;
        transition: all 0.2s ease-in-out;
        &:after {
          position: absolute;
          top: 100%;
          left: 0;
          content: attr(attr-text);
          display: inline-block;
        }
      }
      each(range(5), {
        span:nth-child(@{value}) {
          transition-delay: (@value - 1) * 0.05s;
        }
      });
    }
  }
}

.menuCover {
  position: fixed;
  z-index: 98;
  inset: 0;
  visibility: hidden;
  transition: @bgDur;
  transition-delay: @bgDelay;
  &.show {
    visibility: visible;
    transition-delay: 0s;
    .bg {
      opacity: 1;
      transition-delay: 0s;
    }
    .ball {
      opacity: 0.5;
    }
    .menuRow {
      .ul {
        .li {
          transform: translateX(0%);
          opacity: 1;
        }
      }
    }
  }
  .bg {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(15px);
    opacity: 0;
    transition: opacity @bgDur;
    transition-delay: @bgDelay;
  }
  .ball {
    width: 20px;
    height: 20px;
    border-radius: 100px;
    border: solid 2px #000;
    opacity: 0;
    transition: opacity @bgDur;
  }
  .menuRow {
    position: absolute;
    inset: 0;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    .ul {
      padding: 0 25px;
      .li {
        align-items: flex-start;
        cursor: pointer;
        transition: all @mItemDur ease-in-out;
        transform: translateX(-30%);
        opacity: 0;
        &:hover {
          .txt {
            transform: scale(0.95);
            &:before {
              width: 100%;
            }
            &:after {
              transform: scale(1);
              opacity: 0.5;
            }
          }
        }
        .txt {
          color: #454545;
          font-weight: bold;
          line-height: 1.8;
          display: inline-block;
          position: relative;
          margin: 10px 0;
          transition: transform 0.2s ease-in-out;
          &:before {
            content: '';
            display: block;
            position: absolute;
            width: 0%;
            height: 5px;
            left: 0;
            bottom: 0;
            background: #454545;
            transition: width 0.9s;
          }
          &:after {
            content: attr(attr-text);
            transition: all 0.2s ease-in-out;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transform: scale(1.4);
            display: inline-block;
            text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
          }
        }
      }
      each(range(@mItemCount), {
        .li:nth-child(@{value}) {
          transition-delay: (@value - 1) * @mItemDelay;
        }
      });
    }
  }
}
